<template>
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="30%"
        v-dialogDrag
        append-to-body
        @close="handleClose"
    >
        <el-form
            ref="formRef"
            :model="formData"
            v-loading="formLoading"
            label-width="100px"
        >
            <el-form-item
                label="部门"
                prop="deptId"
                :rules="[
                    {
                        required: true,
                        message: '请选择部门',
                        trigger: 'blur',
                    },
                ]"
            >
                <el-select
                    v-model="formData.deptId"
                    style="width: 100%"
                    filterable
                    placeholder="请选择部门"
                    @change="changeDepts"
                >
                    <el-option
                        v-for="(item, index) in deptsList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                label="用户"
                prop="userIds"
                :rules="[
                    {
                        required: true,
                        message: '请选择用户',
                        trigger: 'blur',
                    },
                ]"
            >
                <el-select
                    v-model="formData.userIds"
                    style="width: 100%"
                    filterable
                    placeholder="请选择用户"
                    multiple
                >
                    <el-option
                        v-for="(item, index) in userList"
                        :key="index"
                        :label="item.nickname"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button
                type="primary"
                @click="submitForm"
                :disabled="formLoading"
                >确 定</el-button
            >
            <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { listUser } from "@/api/system/user";
import { listSimpleDepts } from "@/api/system/dept";
import { publishDomain, getUserSelectDomain } from "@/api/domain";
export default {
    data() {
        return {
            // 弹出层标题
            dialogTitle: "下发",
            // 是否显示弹出层,
            dialogVisible: false,
            formLoading: false,
            userList: [],
            deptsList: [],
            formData: {
                deptId: "",
                domainId: "",
                userIds: [],
            },
        };
    },
    methods: {
        /** 打开弹窗 */
        async open(row) {
            this.dialogVisible = true;
            this.$nextTick(() => {
                this.formData.domainId = row.id;
                this.formData.deptId = row.deptId;
                this.formData.userIds = row.userIds;
            });
            
            this.getUserList({
                pageNo: 1,
                pageSize: 3000,
            });
            this.listSimpleDepts();
        },
        /** 提交按钮 */
        async submitForm() {
            // 校验主表
            await this.$refs["formRef"].validate();
            this.formLoading = true;
            try {
                const data = this.formData;
                await publishDomain(data);
                this.$modal.msgSuccess("下发成功");
                this.dialogVisible = false;
                this.$emit("success");
            } finally {
                this.formLoading = false;
            }
        },
        handleClose() {
            this.formData = {
                deptId: "",
                domainId: "",
                userIds: [],
            };
            this.resetForm("formRef");
        },
        changeDepts(val) {
            this.formData.deptId = val;
            this.getUserList({
                pageNo: 1,
                pageSize: 3000,
                deptId: val,
            });
        },
        async getUserList(val) {
            const { code, data } = await listUser(val);
            if (code === 0) {
                this.userList = data.list;
            }
        },
        async listSimpleDepts() {
            const { code, data } = await listSimpleDepts();
            if (code === 0) {
                this.deptsList = data;
            }
        },
        async getUserSelectDomain() {
            const { code, data } = await getUserSelectDomain();
            if (code === 0) {
                console.log("=====", data);
            }
        },
    },
    created() {},
};
</script>
